<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Appointment Registration</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/jquery/jquery.validate.js"></script>
    <script src="${contextPath}/js/appointment/appointment.js"></script>
</head>
<body class="metro home">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        	<%-- header-container --%>
            <s:set var="mode" value="'registration'"/>
            <jsp:include page="/WEB-INF/content/appointment/AppointmentMenuContainer.jsp" flush="true"/>
            
            <div class="notice marker-on-bottom bg-darkRed fg-white text-center">
            	<h2>${aptDate} | ${aptTime} PM</h2>
            	<div>Please select a patient from following list for above appointment.</div>
            </div>
            
            <div id="appointment-registration-form-container" class="form-container">
	            <form id="appointment-registration-form" class="registration-form appointment-form" action="${contextPath}/appointment/insert" method="post">
	            	<input type="hidden" name="guiAppointment.appointmentId" value="${guiAppointment.appointmentId}" />
	                <input type="hidden" name="guiAppointment.date" value="${guiAppointment.date}" />
	                <input type="hidden" name="guiAppointment.time" value="${guiAppointment.time}" />
		            <div class="listview-outlook">
		            	<s:iterator var="oGuiPatient" value="%{guiPatientList}" status="status">
		                	<a class="list">
		                    	<div class="list-content">
		                        	<div class="list-icon-container place-left">
		                        		<s:if test="%{#status.index == 0}">
			                    			<input type="radio" class="place-left" name="guiAppointment.patient.userId" value="${oGuiPatient.userId}" checked="checked"/>
			                    		</s:if>
			                    		<s:else>
			                    			<input type="radio" class="place-left" name="guiAppointment.patient.userId" value="${oGuiPatient.userId}"/>
			                    		</s:else>
		         						<s:if test="%{#oGuiPatient.male}">
		          							<img class="list-icon bg-lightBlue" src="${contextPath}/img/icon/Man-128.png"/>
		         						</s:if>
		         						<s:elseif test="%{#oGuiPatient.female}">
		          							<img class="list-icon bg-lightPink" src="${contextPath}/img/icon/Woman-128.png"/>
		         						</s:elseif>
		        					</div>
		                        	<div class="place-left">
		                            	<span class="list-title">${oGuiPatient.name}</span>
		                                <span class="list-subtitle">Date Of Birth: ${oGuiPatient.dobString}</span>
		         						<span class="list-remark">${oGuiPatient.gender}</span>
		                            </div>
		                            <br clear="all"/>
		                        </div>
		                    </a>
		                </s:iterator>
		            </div>
		            
		            <div class="pagination no-print">           	
		                <ul>
		                    <li class="first ${guiPagination.activePage == guiPagination.firstPage ? 'disabled' : ''}">
		                        <a href="${contextPath}/appointment/registration?aptDate=${aptDate}&aptTime=${aptTime}&page=${guiPagination.firstPage}"><i class="icon-first-2"></i></a>
		                    </li>
		                    <li class="prev ${guiPagination.activePage == guiPagination.firstPage ? 'disabled' : ''}">
		                        <a href="${contextPath}/appointment/registration?aptDate=${aptDate}&aptTime=${aptTime}&page=${guiPagination.prevPage}"><i class="icon-previous"></i></a>
		                    </li>
		                    <s:iterator status="stat" begin="1" end="%{guiPagination.noOfPages}">
		                        <li class="${guiPagination.activePage == stat.count ? 'active' : ''}">
		                            <a href="${contextPath}/appointment/registration?aptDate=${aptDate}&aptTime=${aptTime}&page=${stat.count}">${stat.count}</a>
		                        </li>
		                    </s:iterator>         
		                    <li class="next ${guiPagination.activePage == guiPagination.lastPage ? 'disabled' : ''}">
		                        <a href="${contextPath}/appointment/registration?aptDate=${aptDate}&aptTime=${aptTime}&page=${guiPagination.nextPage}"><i class="icon-next"></i></a>
		                    </li>
		                    <li class="last ${guiPagination.activePage == guiPagination.lastPage ? 'disabled' : ''}">
		                        <a href="${contextPath}/appointment/registration?aptDate=${aptDate}&aptTime=${aptTime}&page=${guiPagination.lastPage}"><i class="icon-last-2"></i></a>
		                    </li>
		                </ul>
		            </div>
		            
		            <br clear="all"/>
		            <div class="form-button-container" style="margin-left:270px;">
                           <a onClick="$('#appointment-registration-form').submit(); return false;">
                               <div class="form-button tile half-vertical subheader-secondary bg-cobalt fg-white">
                                   Add <i class="icon-pencil on-right smaller"></i>
                               </div>
                           </a>                            
                           <a href="${contextPath}/appointment/list?aptDate=${aptDate}">
                               <div class="form-button tile half-vertical subheader-secondary bg-cyan fg-white">
                                   Cancel <i class="icon-cancel-2 on-right smaller"></i>
                               </div>
                           </a>
                    </div>
                    <br clear="all"/>
	            </form>
            </div>
            
    	</div>
        
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>